import React from 'react';
import {App, Button, Card, Descriptions, Flex, Popconfirm, Space, Tag} from "antd";
import {Link, useLocation, useNavigate} from "react-router-dom";
import {SecurityUser} from "type/entity/SecurityUser";
import {TeamOutlined, MenuOutlined, CloseOutlined, UpCircleOutlined} from '@ant-design/icons';
import {useAppDispatch} from "storage/redux/hook";
import {fetchDeleteUser} from "storage/redux/async-action/userAsyncAction";

const getTag = (flag: boolean) => {
    return flag ? <Tag color={"#0b5324"}>正常</Tag> : <Tag color={"#700e0e"}>异常</Tag>;
};
const UserDetailsComponent = () => {
    const user = useLocation().state as SecurityUser;
    const nav = useNavigate();
    const {message} = App.useApp();
    const dispatch = useAppDispatch();
    const onConfirm = async () => {
        const res = await dispatch(fetchDeleteUser(user.id)).unwrap();
        if (res.success && res.data > 0) {
            message.success(`删除用户 ${user.username} 成功!`);
            nav("..");
            return;
        }
        message.warning(`删除用户 ${user.username} 失败!`);
    };
    const updateUser = () => nav("../update", {state: user});
    const userRoleSkip = () => nav("../role", {state: user});
    const userMenuSkip = () => nav("../menu", {state: user});
    return (
        <Card title={`用户详情 - ${user.username}`} extra={<Link to={".."}>用户列表</Link>}>
            <Flex style={{margin: "10px 5px"}} justify={"space-between"} gap={50}>
                <Space>
                    <Popconfirm
                        title={`确认删除用户 ${user.username} ?`}
                        description={"删除用户将无法恢复!"}
                        onConfirm={onConfirm}
                    >
                        <Button type={"primary"} danger icon={<CloseOutlined/>}>删除用户</Button>
                    </Popconfirm>
                    <Button type={"primary"} icon={<UpCircleOutlined/>} onClick={updateUser}>更新用户</Button>
                </Space>
                <Space>
                    <Button style={{ backgroundColor: "#00B96B" }} type={"primary"} icon={<TeamOutlined/>} onClick={userRoleSkip}>用户角色</Button>
                    <Button style={{ backgroundColor: "#00B96B" }} type={"primary"} icon={<MenuOutlined/>} onClick={userMenuSkip}>用户菜单</Button>
                </Space>
            </Flex>
            <Descriptions
                style={{userSelect: "none"}}
                bordered={true}
                column={2}
                size={"middle"}
                layout={"horizontal"}
                items={[
                    {label: "用户名", children: user.username},
                    {label: "用户身份", children: user.identity},
                    {label: "用户ID", children: user.id},
                    {label: "唯一标识", children: user.key},
                    {label: "用户密码", children: user.password, span: 2},
                    {label: "用户性别", children: user.gender ? "男" : "女"},
                    {label: "用户年龄", children: user.age},
                    {label: "用户启用状态", children: getTag(user.enabled)},
                    {label: "用户锁定状态", children: getTag(user.accountNonLocked)},
                    {label: "用户过期状态", children: getTag(user.accountNonExpired)},
                    {label: "密码过期状态", children: getTag(user.credentialsNonExpired)},
                    {label: "创建时间", children: user.createTime.toString()},
                    {label: "更新时间", children: user.updateTime.toString()},
                    {label: "数据排序", children: user.order},
                    {label: "数据版本", children: user.version},
                    {label: "备注信息", children: user.remark},
                ]}
            />
        </Card>
    );
};

export default UserDetailsComponent;